import { createCamera } from "./components/camera.js";
import { createCube } from "./components/cube.js";
import { createLights } from "./components/light.js";
import { createScene } from "./components/scene.js";

import { createRenderer } from "./systems/renderer.js";
import { Resizer } from "./systems/Resizer.js";
import { Loop } from "./systems/Loop.js";
import { createControls } from './systems/controls.js';

class threeObj {
    #camera;
    #scene;
    #renderer;
    #loop;

    constructor(container) { 
        this.#camera = createCamera();
        this.#scene = createScene();
        this.#renderer = createRenderer();

        this.#loop = new Loop(this.#camera, this.#scene, this.#renderer);

        container.append(this.#renderer.domElement);
        const controls = createControls(this.#camera, this.#renderer.domElement);

        const cube = createCube();
        const light = createLights();

        this.#loop.updatables.push(controls);

        // this.#loop.updatables.push(cube);
        this.#scene.add(cube, light);

        const resizer = new Resizer(container, this.#camera, this.#renderer);
        // resizer.onResize = () => {
        //     this.render();
        // }
    }

    render() { 
        this.#renderer.render(this.#scene, this.#camera);
    }

    start() {
        this.#loop.start();
    }

    stop() {
        this.#loop.stop();
    }
}

export { threeObj }